<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6" v-for="shop in shops.slice(0,4)" :key="shop.id">
        <div style="width: 240px">
          <el-skeleton
              style="width: 240px"
              :loading="loading"
              animated
              :throttle="500"
          >
            <template slot="template">
              <el-skeleton-item
                  variant="image"
                  style="width: 240px; height: 240px;"
              />
              <div style="padding: 14px;">
                <el-skeleton-item variant="h3" style="width: 50%;"/>
                <div
                    style="display: flex; align-items: center;  margin-top: 16px; height: 16px;"
                >
                  <el-skeleton-item variant="text" style="margin-right: 16px;"/>
                  <el-skeleton-item variant="text" style="width: 30%;"/>
                </div>
              </div>
            </template>
            <template>
              <el-card :body-style="{ padding: '0px', marginBottom: '1px'}">
                <img
                    src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                    class="image"
                />
                <div style="padding: 14px;">
                  <span style="font-family: 'PingFang SC',serif;color:#ff6c37;font-weight: bold;font-size: 20px;font-style: italic">{{ shop.name }}</span>
                  <div class="bottom card-header">
                    <span class="time" style="font-size: 14px">{{ shop.description }}</span>
                    <el-button type="primary" plain size="small" @click="entershop(shop.id,shop.name)">进入商店</el-button>
                  </div>
                </div>
              </el-card>
            </template>
          </el-skeleton>
        </div>
      </el-col>
      <el-col :span="6" v-for="shop in shops.slice(4,8)" :key="shop.id">
        <div style="width: 240px">
          <el-skeleton
              style="width: 240px"
              :loading="loading"
              animated
              :throttle="500"
          >
            <template slot="template">
              <el-skeleton-item
                  variant="image"
                  style="width: 240px; height: 240px;"
              />
              <div style="padding: 14px;">
                <el-skeleton-item variant="h3" style="width: 50%;"/>
                <div
                    style="display: flex; align-items: center;  margin-top: 16px; height: 16px;"
                >
                  <el-skeleton-item variant="text" style="margin-right: 16px;"/>
                  <el-skeleton-item variant="text" style="width: 30%;"/>
                </div>
              </div>
            </template>
            <template>
              <el-card :body-style="{ padding: '0px', marginBottom: '1px'}">
                <img
                    src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                    class="image"
                />
                <div style="padding: 14px;">
                  <span style="font-family: 'PingFang SC',serif;color:#ff6c37;font-weight: bold;font-size: 20px;font-style: italic">{{ shop.name }}</span>
                  <div class="bottom card-header">
                    <span class="time" style="font-size: 14px;">{{ shop.description }}</span>
                    <el-button type="primary" plain size="small" @click="entershop(shop.id,shop.name)">进入商店</el-button>
                  </div>
                </div>
              </el-card>
            </template>
          </el-skeleton>
        </div>
      </el-col>
    </el-row>
    <el-pagination
        background
        layout="prev, pager, next"
        :total="1000"
    >
    </el-pagination>
  </div>



</template>

<script>
import axios from 'axios'
import {businessStore} from "@/store";

export default {
  name: "ShopList",
  data() {
    return {
      loading: true,
      currentDate: '2021-06-01',
      shops: '',
      page: 0,
      size: '',
    }
  },
  methods: {
    entershop(id,name){
      console.log(id,name)
      businessStore.businessId = id;
      businessStore.businessName = name
      localStorage.setItem('shopName',businessStore.businessName)
      localStorage.setItem('shopId',businessStore.businessId)
      this.$router.push('/shopinfo')
    }
  },
  mounted(){
    axios.get('/shop/getAllShop/?size=8&page='+this.page,{
      headers: {
        "Access-Control-Allow-Origin": "*",
      }
    }).then(res => {
      this.shops = res.data.data
      console.log(res.data.data)
      this.loading = false;
    })
  }
}

</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
  margin-top: 30px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>